<template>
    <div class="code_box" @click="cancelClick">
        <text class="cancelCanvasBotton" @click="cancelClick">&#xe61a;</text>
        <div class="code_box_code" @click="">
            <image style="width:470px;height:470px" :src="img" />
            <text style="font-size:30px;">APP扫码提货</text>
        </div>

    </div>
</template>

<script>
    import {
        pickup_qrcode
    } from '@/api/order'
    export default {
        data(){
            return{
                img:''
            }
        },
        props:[
            'orderId'
        ],
        created(){
          this.initIconFont()
          this.qrcodeClick()
        },
        methods:{
            qrcodeClick() {
                var _this = this
                console.log(_this.orderId)
                pickup_qrcode({orderId:_this.orderId}).then(
                    res => {
                        console.log(res)
                        _this.img = this.globalData.APP_BASE_API + '/zxing/createImage?data='+res.content
                        console.log(_this.img)
                    }
                ).catch(error => {

                })
            },
            cancelClick(){
                this.$emit('cancelClick')

            }
        }
    }
</script>

<style scoped>
    .code_box{
        position: fixed;
        top: 0;
        left: 0;
        flex-direction: column;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
    }
    .cancelCanvasBotton {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        color: white;
        font-size: 40px;
        width: 470px;
        margin-bottom: 20px;
        font-family: iconfont2;
        text-align: right;
    }
    .code_box_code{
        width: 490px;
        height: 530px;
        background-color: white;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
</style>
